<template>
  <div class="common_wrap">
    <div class="common_title">用户数据</div>
    <div class="chart-box">
      <div class="chart-box-title">用户数据</div>
      <div class="select-box flex">
        <template v-if="radio === 1">
          <el-date-picker
              v-model="timeRange"
              type="daterange"
              value-format="yyyy-MM-dd"
              :picker-options="pickerOptions"
              @focus="focusPickData"
              @change="pickerChange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
          </el-date-picker>
        </template>
        <template v-else>
          <el-date-picker
              v-model="timeRange"
              type="monthrange"
              value-format="yyyy-MM"
              :picker-options="pickerOptionsMonth"
              @focus="focusPickMonth"
              @change="pickerChange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
          </el-date-picker>
        </template>
        <div>
          <el-radio-group v-model="radio" size="medium" @change="timeChange">
            <el-radio-button :label="1">日活</el-radio-button>
            <el-radio-button :label="2">月活</el-radio-button>
          </el-radio-group>
        </div>
      </div>
      <div id="charts"></div>
    </div>
    <div class="flex data-outbox">
      <div class="data-box">
        <div class="data-box-title">当日访问人数（人）</div>
        <div class="data-box-num">{{ visitor.dayVisitorsNum }}</div>
      </div>
      <div class="data-box">
        <div class="data-box-title">当月访问人数（人）</div>
        <div class="data-box-num">{{ visitor.monthVisitorsNum }}</div>
      </div>
      <div class="data-box">
        <div class="data-box-title">累计访问人数（人）</div>
        <div class="data-box-num">{{ visitor.visitorsTotalNum }}</div>
      </div>
    </div>
    <div class="flex data-outbox">
      <div class="data-box">
        <div class="data-box-title">当日访问量（次）</div>
        <div class="data-box-num">{{ visitor.dayVisitorTimes }}</div>
      </div>
      <div class="data-box">
        <div class="data-box-title">当月访问量（次）</div>
        <div class="data-box-num">{{ visitor.monthVisitorsTimes }}</div>
      </div>
      <div class="data-box">
        <div class="data-box-title">累计访问量（次）</div>
        <div class="data-box-num">{{ visitor.visitorsTotalTimes }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import echarts from 'echarts'
import {getDayTotalVisitors, getPointDateVisitorsPv, getPointMonthVisitorsPv} from "@/api/api";
export default {
  data() {
    return {
      timeRange: '',
      radio: 1,
      pickerOptions: {
        disabledDate(date) {
          return date.getTime() > Date.now() - 8.64e7 || date.getTime() < Date.now() - 8.64e7 * 32;
        }
      },
      pickerOptionsMonth: {
        disabledDate(date) {
          return date.getTime() > Date.now() - 8.64e7 || date.getTime() < Date.now() - 8.64e7 * 732;
        }
      },
      visitor: {}
    }
  },
  mounted() {
    this.getDailyRange()

    this.getVisitors()
    // this.getDailyVisitorPv()
  },
  methods: {
    timeChange(e) {
      if(e === 1) {
        this.getDailyRange()
      } else {
        this.getMonthRange()
      }
    },
    focusPickData() {
      //定义一个最小值将他记录为today
      var today = undefined
      let minTime
      this.pickerOptions = {
        // 获取最大最小值
        onPick(min) {
          minTime = new Date(min.minDate).getTime()
          if (min.maxDate) {
            today = null;
          } else {
            today = new Date(min.minDate).getTime()
          }
        },
        //控制禁用范围
        disabledDate(time) {
          if (!time) {
            return false;
          }
          //如果有最小值则控制前后一段时间的禁用范围
          if (today) {
            if(minTime + 8.64e7 *31 < new Date().getTime()) {
              // 30天后禁选时间小于当前时间全时间可选，否则只选择到当天前一天
              return (
                  // time.getTime() - 1000 * 360 0 * 24 * 30 * 3 >= today ||
                  // time.getTime() <= today - 1000 * 3600 * 24 * 30 * 3
                  time.getTime() > minTime + 8.64e7 *30 || time.getTime() < minTime - 8.64e7 * 30
              );
            } else {
              return (
                  // time.getTime() - 1000 * 3600 * 24 * 30 * 3 >= today ||
                  // time.getTime() <= today - 1000 * 3600 * 24 * 30 * 3
                  time.getTime() > new Date().getTime() - 8.64e7 || time.getTime() < minTime - 8.64e7 * 31
              );
            }
            //如果有最大值 那么说明时间选择完成，将禁用范围放开可重新选择
          } else if (today === null) {
            return false;
          } else {
            return (
                time.getTime() > new Date().getTime() - 8.64e7
            );
          }
        },
      };
    },
    focusPickMonth() {
      //定义一个最小值将他记录为today
      var today = undefined
      let minTime
      this.pickerOptionsMonth = {
        // 获取最大最小值
        onPick(min) {
          minTime = new Date(min.minDate).getTime()
          if (min.maxDate) {
            today = null;
          } else {
            today = new Date(min.minDate).getTime()
          }
        },
        //控制禁用范围
        disabledDate(time) {
          if (!time) {
            return false;
          }
          //如果有最小值则控制前后一段时间的禁用范围
          if (today) {
            if(minTime + 8.64e7 *732 < new Date().getTime()) {
              // 12月后禁选时间小于当前时间全时间可选，否则只选择到当前月
              return (
                  time.getTime() > minTime + 8.64e7 *732 || time.getTime() < minTime - 8.64e7 * 732
              );
            } else {
              return (
                  time.getTime() > new Date().getTime() - 8.64e7 || time.getTime() < minTime - 8.64e7 * 732
              );
            }
            //如果有最大值 那么说明时间选择完成，将禁用范围放开可重新选择
          } else if (today === null) {
            return false;
          } else {
            return (
                time.getTime() > new Date().getTime() - 8.64e7
            );
          }
        },
      };
    },
    getDailyRange() {
      let yesterday = new Date().getTime() - 86400000
      let before15days = yesterday - ( 86400000 * 15 )
      let yesterdayDate = new Date(yesterday);
      let yesterdayY = yesterdayDate.getFullYear() + '-';
      let yesterdayM = (yesterdayDate.getMonth() + 1 < 10 ? '0' + (yesterdayDate.getMonth() + 1) : yesterdayDate.getMonth() + 1) + '-';
      let yesterdayD = yesterdayDate.getDate() < 10 ? '0' + yesterdayDate.getDate() : yesterdayDate.getDate() + '';
      let yesterdayYMD = yesterdayY + yesterdayM + yesterdayD;
      let before15date = new Date(before15days);
      let before15Y = before15date.getFullYear() + '-';
      let before15M = (before15date.getMonth() + 1 < 10 ? '0' + (before15date.getMonth() + 1) : before15date.getMonth() + 1) + '-';
      let before15D = before15date.getDate() < 10 ? '0' + before15date.getDate() : before15date.getDate() + '';
      let before15YMD = before15Y + before15M + before15D;
      this.timeRange = [before15YMD, yesterdayYMD ]
      this.getDailyVisitorPv()
    },
    getMonthRange() {
      let yesterday = new Date().getTime()
      let yesterdayDate = new Date(yesterday);
      let yesterdayY = yesterdayDate.getFullYear() + '-';
      let yesterdayM = (yesterdayDate.getMonth() + 1 < 10 ? '0' + (yesterdayDate.getMonth() + 1) : yesterdayDate.getMonth() + 1) + '-';
      let yesterdayYM = yesterdayY + yesterdayM;
      let before12Y = yesterdayDate.getFullYear() - 1 + '-';
      let before12M = (yesterdayDate.getMonth() + 1 < 10 ? '0' + (yesterdayDate.getMonth() + 1) : yesterdayDate.getMonth() + 1);
      let before12YM = before12Y + before12M;
      this.timeRange = [before12YM, yesterdayYM ]
      this.getMonthVisitorPv()
    },
    pickerChange(e) {
      this.timeRange = e
      if(this.radio === 1) {
        this.getDailyVisitorPv()
      } else {
        this.getMonthVisitorPv()
      }
    },
    initCharts(data) {
      var chartDom = document.getElementById('charts');
      var myChart = echarts.init(chartDom);
      var option;
      let days = [], statistic = []
      data.map(item => {
        days.push(item.date)
        statistic.push(item.count)
      })
      option = {
        tooltip: {
          trigger: 'axis',
          axisPointer:{
            type:'line',
            lineStyle:{
              type:'dashed'
            }
          }
        },
        grid: {
          top: '4%', left: '5%', right: '4%', bottom: '18%'
        },
        xAxis: {
          type: 'category',
          data: days,
          axisLabel: {
            rotate: 45
          },
        },
        yAxis: {
          type: 'value',
          axisLine: {
            show: false //隐藏y轴
          },
          axisTick: {
            show: false  //刻度线
          },
        },
        series: [
          {
            data: statistic,
            type: 'line',
            color: '#4aa4ea',
            showSymbol: false,
          }
        ]
      };
      option && myChart.setOption(option);
    },
    getVisitors() {
      this.$api.getDayTotalVisitors().then(res => {
        this.visitor = res.data.data
      })
    },
    getDailyVisitorPv() {
      let params = {
        startDate: this.timeRange[0].split('-').join(''),
        endDate: this.timeRange[1].split('-').join('')
      }
      this.$api.getPointDateVisitorsPv(params).then( res => {
        this.initCharts(res.data.data)
      })
    },
    getMonthVisitorPv() {
      let params = {
        strStartMonth: this.timeRange[0].split('-').join(''),
        strEndMonth: this.timeRange[1].split('-').join('')
      }
      this.$api.getPointMonthVisitorsPv(params).then( res => {
        this.initCharts(res.data.data)
      })
    }
  }
}
</script>

<style scoped>
.flex {
  display: flex;
}
#charts {
  height: 350px;
}
.chart-box {
  border: 1px solid #c3c3c3;
  margin-top: 20px;
  padding: 16px;
  border-radius: 8px;
}
.chart-box-title{
  font-size: 16px;
  margin-bottom: 10px;
}
.select-box{
  justify-content: space-between;
  margin-bottom: 10px
}
.data-box{
  border: 1px solid #c3c3c3;
  margin-top: 20px;
  padding: 16px;
  border-radius: 8px;
  width: 27%;
  color: #666;
}
.data-box-title {
  font-size: 18px;
}
.data-box-num {
  font-size: 24px;
  margin-top: 16px;
}
.data-outbox {
  justify-content: space-between;
}
</style>
